<!DOCTYPE html>
<html>
<head>
    <title>Low-Poly Terrain Login</title>
    <style>
        body { 
            margin: 0; 
            overflow: hidden; 
            font-family: Arial, sans-serif;
        }
        .login-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            z-index: 100;
        }
        input, button {
            box-sizing: border-box;
            display: block;
            margin: 10px 0;
            padding: 8px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="login-box">
        <h2>Terrain Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button>Login</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // 初始化场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x87CEEB);
        
        // 相机设置
        const camera = new THREE.PerspectiveCamera(
            75, 
            window.innerWidth / window.innerHeight, 
            0.1, 
            1000
        );
        camera.position.z = 5;
        camera.position.y = 2;
        camera.lookAt(0, 0, 0);

        // 渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 创建低多边形地形
        const terrainGeometry = new THREE.PlaneGeometry(20, 20, 30, 30);
        const vertices = terrainGeometry.attributes.position.array;
        
        // 随机地形高度
        for (let i = 0; i < vertices.length; i += 3) {
            vertices[i + 2] = (Math.random() - 0.5) * 2;
        }
        
        const terrain = new THREE.Mesh(
            terrainGeometry,
            new THREE.MeshPhongMaterial({ 
                color: 0x4dabf7, 
                wireframe: true,
                flatShading: true 
            })
        );
        terrain.rotation.x = -Math.PI / 2;
        scene.add(terrain);

        // 添加光照
        const ambientLight = new THREE.AmbientLight(0x404040);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);

        // 鼠标互动：光照跟随鼠标
        document.addEventListener('mousemove', (e) => {
            directionalLight.position.x = (e.clientX / window.innerWidth) * 10 - 5;
            directionalLight.position.y = 5 - (e.clientY / window.innerHeight) * 5;
        });

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            terrain.rotation.z += 0.001;
            renderer.render(scene, camera);
        }
        animate();

        // 窗口大小调整
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>